import React from 'react';
import { Animated, Easing } from 'react-native';

class Bounce extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bounceValue: new Animated.Value(0)
    };
  }

  componentDidMount() {
    Animated.sequence([
      Animated.timing(this.state.bounceValue, {
        toValue: -20,
        duration: 200,
        useNativeDriver: true
      }),
      Animated.timing(this.state.bounceValue, {
        toValue: 0,
        duration: 200,
        useNativeDriver: true
      })
    ]).start();
  }

  render() {
    return (
      <Animated.View style={{ transform: [{ translateY: this.state.bounceValue }] }}>
        {this.props.children}
      </Animated.View>
    );
  }
}

export default Bounce;